<template>
  <div class="orderItem">
    <a-row class="orderHead">
      <a-col span="1"
        ><a-checkbox :checked="getCheckStatus(order.id)" @change="$emit('chooseOrder', order)"></a-checkbox
      ></a-col>
      <a-col span="23">
        <a-tooltip>
          <template slot="title"> 双击复制 </template>
          <span @dblclick="copyText(order.order_no)">订单号：{{ order.order_no }}</span>
        </a-tooltip>
      </a-col>
      <!-- <a-col span="12" v-if='order.mch_order_no'>
        <a-tooltip>
          <template slot="title"> 双击复制 </template>
          <span @dblclick="copyText(order.mch_order_no)">商家订单号：{{ order.mch_order_no }}</span>
        </a-tooltip>
      </a-col> -->
    </a-row>
    <a-row type="flex" class="orderBody">
      <a-col span="1">
        <div class="open" v-if="order.goods_list && order.goods_list.length > 1" @click.stop="is_open = !is_open">
          <span v-if="is_open">-</span>
          <span v-else>+</span>
        </div>
      </a-col>
      <template v-for="(item, index) in list_th">
        <a-col :key="item.type" :span="item.span" v-if="item.type == 'name'">
          <div
            class="goodsInfo"
            v-for="(good, goodIndex) in is_open ? order.goods_list : [order.goods_list[0]]"
            :key="goodIndex"
          >
            <img :src="good.pic" alt="" />
            <div class="info">
              <a-tooltip style="width: 100%">
                <template slot="title"> {{ good.goods_name }}</template>
                <span class="goodName">{{ good.goods_name }}</span>
              </a-tooltip>
              <a-tooltip style="width: 100%" v-if="good.attr">
                <template slot="title">
                  {{
                    good.attr.attr_list
                      ? good.attr.attr_list
                          .map((item) => {
                            return item.attr_name + ' '
                          })
                          .join(' ')
                      : '规格:默认'
                  }}</template
                >
                <span class="attrName">{{
                  good.attr.attr_list
                    ? good.attr.attr_list
                        .map((item) => {
                          return item.attr_name
                        })
                        .join(' ')
                    : '规格:默认'
                }}</span>
              </a-tooltip>
            </div>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'count'">
          <div
            class="count"
            v-for="(good, goodIndex) in is_open ? order.goods_list : [order.goods_list[0]]"
            :key="goodIndex"
          >
            <span>￥{{ good.total_price }}</span>
            <span>×{{ good.num }}</span>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'confirm_time'">
          {{ order.confirm_time }}
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'buy_time'">
          <div>{{ order.name }}</div>
          <div>{{ order.created_at }}</div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'admin_name'">
          <div
            class="count"
            v-for="(good, goodIndex) in is_open ? order.goods_list : [order.goods_list[0]]"
            :key="goodIndex"
          >
            <span>{{ good.admin_name }}</span>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'discount'"> ￥0.00 </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'pay_price'">
          <div class="count">
            <span>￥{{ order.pay_price }}</span>
            <span style="color: rgba(0, 0, 0, 0.65)">(含快递:￥{{ order.express_price }})</span>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'send_type'">
          <a-tooltip
            overlayClassName="draw_overlay"
            :overlayStyle="{
              width: '250px',
            }"
          >
            <template slot="title">
              <div class="addressInfo">
                <h3>收货人</h3>
                <h4>姓名：{{ order.name }}</h4>
                <h4>手机：{{ order.mobile }}</h4>
                <h4>地址：{{ order.address }}</h4>
              </div>
            </template>

            <div class="count">
              <span>{{ order.name }}</span>
              <span>快递配送</span>
            </div>
          </a-tooltip>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'add_time'">
          <div v-if="order.user" class="count">
            <span>{{ order.user.store_name || '-' }}</span>
            <span> {{ order.pay_time > 0 ? $moment(order.pay_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'stbz_trans_status'">
          <div class="orderStatus">
            <div class="status">
              <span :style="{ backgroundColor: statusColor2 }"></span>
              <span>{{ orderStatus2 }}</span>
            </div>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'status'">
          <div
            class="count"
            v-for="(good, goodIndex) in is_open ? order.goods_list : [order.goods_list[0]]"
            :key="goodIndex"
          >
            <div class="orderStatus">
              <div class="status">
                <span :style="{ backgroundColor: statusColor(good.status) }"></span>
                <span>{{ orderStatus(good.status) }}</span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :key="index" :span="item.span" v-if="item.type == 'action'">
          <template v-if="userInfo.info.type === 'supplier'">
            <a-button type="link" size="small" @click="clickAction('detail')">详情</a-button>
            <!-- <a-button v-if="order.status === 0" type="link" size="small" @click="clickAction('deliver')">配送</a-button> -->
          </template>
        </a-col>
      </template>
    </a-row>
  </div>
</template>

<script>
import Template from '@/components/DiyNew/StorageSelect/Template.vue'
export default {
  components: { Template },
  props: {
    order: {
      type: Object,
      default: () => {
        return {}
      },
    },
    choosed: {
      type: Boolean,
      default: false,
    },
    list_th: {
      type: Array,
      default: () => {
        return []
      },
    },
    selectedRowKeys: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      // 是否展开多商品信息
      is_open: false,
    }
  },
  methods: {
    // 双击复制
    copyText(data) {
      if (!data) return
      this.$copyText(data)
        .then((e) => {
          this.$message.success('复制成功')
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('复制失败')
        })
    },
    // 点击按钮
    clickAction(type) {
      this.$emit('triggerAction', { type, order: this.order })
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.user
    },

    getCheckStatus() {
      return (val) => {
        return this.selectedRowKeys.findIndex((el) => el.id === val) !== -1
      }
    },

    statusColor() {
      return (status) => {
        let color = ''
        if (status == -1) {
          // 已取消
          color = '#c6c6c6'
        }
        if (status == 0) {
          // 待发货
          color = '#faad14'
          if (this.order.cancel_examine == 1) {
            // 取消申请中
            color = '#faad14'
          }
        }
        if (status == 1) {
          // 待收货 已发货
          color = '#65c817'
        }
        if (status == 2) {
          // 已完成
          color = '#65c817'
        }

        return color
      }
    },
    orderStatus() {
      return (status) => {
        let text = ''

        if (status == 0) {
          // 待发货
          text = '待配送'
        }
        if (status == 1) {
          // 待收货
          text = '已配送'
        }
        if (status == 2) {
          // 已完成
          text = '已完成'
        }

        return text
      }
    },
    orderActions() {
      // 订单操作 cancle 取消  deliver 发货 agree 同意取消  refuse 拒绝取消订单 detail 详情
      let actions = []
      let status = this.order.status
      if (status == -1) {
        // 已取消
        actions = ['detail']
      }
      if (status == 0) {
        // 待发货
        actions = ['deliver', 'cancle', 'order_receipts_print']
        if (this.order.send_type === '0') {
          actions.splice(1, 1)
        }
        if (this.order.cancel_examine == 1) {
          // 取消申请中
          actions = ['agree', 'refuse', 'order_receipts_print']
        }
      }
      if (status == 1) {
        // 待收货
        // text = '已发货'
        actions = ['detail', 'order_receipts_print']
      }
      if (status == 2) {
        // 已完成
        // text = '已完成'
        actions = ['detail', 'order_receipts_print']
      }
      return actions
    },

    statusColor2() {
      let { stbz_trans_status } = this.order
      if (stbz_trans_status === '0') {
        return '#faad14'
      }

      if (stbz_trans_status === '1') {
        return '#65c817'
      }
    },

    orderStatus2() {
      let { stbz_trans_status } = this.order
      if (stbz_trans_status == '1') {
        return '已转单'
      }

      if (stbz_trans_status == '0') {
        return '未转单'
      }
      return '-'
    },
  },
  filters: {
    actionBtn(val) {
      let text = ''
      switch (val) {
        case 'cancle':
          text = '取消'
          break
        case 'deliver':
          text = '发货'
          break
        case 'agree':
          text = '同意'
          break
        case 'refuse':
          text = '拒绝'
          break
        case 'detail':
          text = '详情'
          break
        case 'order_receipts_print':
          text = '小票打印'
          break
      }
      return text
    },
  },
}
</script>

<style lang="less" scoped>
.orderItem {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}
.orderHead {
  width: 100%;
  height: 54px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}
.orderBody {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  .open {
    font-size: 20px;
    cursor: pointer;
  }
  .goodsInfo {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    img {
      width: 48px;
      min-width: 48px;
      height: 48px;
      border-radius: 4px;
    }
    .info {
      flex: auto;
      display: flex;
      width: 0;
      flex-direction: column;
      margin-left: 24px;
      .goodName,
      .attrName {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      .goodName {
        color: rgba(0, 0, 0, 0.85);
      }
      .attrName {
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
  .goodsInfo:last-child {
    margin-bottom: 0;
  }
  .count {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    text:nth-child(1) {
      margin-bottom: 10px;
    }
    margin-bottom: 15px;
  }
  .count:last-child {
    margin-bottom: 0;
  }
  .addressInfo {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #fff;
    h3 {
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.09);
      color: rgba(0, 0, 0, 0.85);
    }

    h4 {
      color: rgba(0, 0, 0, 0.65);
    }
  }
  .orderStatus {
    .status {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      span:nth-child(1) {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
}
</style>
